<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/httpVueLoader.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-show="isLogged!==null">
				<!-- navigation -->
				<div class="app-header">
					<nav class="navbar navbar-default navbar-inverse" role="navigation">
						<div class="container-fluid">
							<div class="navbar-header">
								<a href="#" class="navbar-brand" @click="handleChangeView('main_view')">仁爱招聘网</a>
							</div>
							<!-- 管理员 -->
							<div class="collapse navbar-collapse navbar-left" id="example-navbar-collapse" v-if="sysUser.permission===0">
								<ul class="nav navbar-nav">
									<li><a href="#" @click="handleChangeView('enterprise_manage')">企业管理</a></li>
									<li><a href="#" @click="handleChangeView('users_manage')">用户管理</a></li>
								</ul>
							</div>
							<!-- 企业 -->
							<div class="collapse navbar-collapse navbar-left" id="example-navbar-collapse" v-else-if="sysUser.permission===1">
								<ul class="nav navbar-nav">
									<li><a href="#" @click="handleChangeView('enterprise_info')">企业信息完善</a></li>
									<li class="dropdown">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown">职位管理</a>
										<ul class="dropdown-menu">
											<li><a href="#" @click="handleChangeView('job_manage')">职位管理</a></li>
											<li class="divider"></li>
											<li><a href="#" @click="handleChangeView('job_add')">添加职位</a></li>
										</ul>
									</li>
									<li><a href="#" @click="handleChangeView('resume_manage')">简历管理</a></li>
								</ul>
							</div>
							<!-- 求职者 -->
							<div class="collapse navbar-collapse navbar-left" id="example-navbar-collapse" v-else-if="sysUser.permission===2">
								<ul class="nav navbar-nav">
									<li><a href="#" @click="handleChangeView('explore_job')">浏览职位</a></li>
									<li><a href="#" @click="handleChangeView('resume_edit')">简历编辑</a></li>
									<li><a href="#" @click="handleChangeView('post_resume_status')">投递情况</a></li>
								</ul>
							</div>
							<ul class="nav navbar-nav navbar-right">
								<li>
									<a href="#" @click="dologout()">
										<span class="glyphicon glyphicon-user"></span>
										欢迎您，<span>{{sysUser.username}}</span>
									</a>
								</li>
							</ul>
						</div>
					</nav>
				</div>

				<!-- main container -->
				<div id="main-container" class="container-fluid">
					<component :is="main_view" style="width: 100%;"></component>
				</div>
			</div>
			<div v-show="isLogged===null">
				<!-- 登录 -->
				<div class="modal" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" data-backdrop="static">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h4 class="modal-title" id="editModalLabel">登录</h4>
							</div>
							<div class="modal-body">
								<div class="form-group">
									<label for="logUsername">用户名</label>
									<input type="text" class="form-control" id="logUsername" placeholder="请输入用户名" v-model="logInfo.username">
								</div>
								<div class="form-group">
									<label for="logPassword">密码</label>
									<input type="password" class="form-control" id="logPassword" placeholder="请输入密码" v-model="logInfo.password">
								</div>
								<div class="panel-group" id="accordion">
									<div class="panel panel-success">
										<div class="panel-heading">
											<h4 class="panel-title">
												<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
													快捷注册
												</a>
											</h4>
										</div>
										<div id="collapseOne" class="panel-collapse collapse">
											<div class="panel-body">
												<div class="form-group">
													<div class="form-group">
														<label for="logPasswordRe">确认密码</label>
														<input type="password" class="form-control" id="logPasswordRe" placeholder="请确认密码" v-model="logInfo.passwordRe">
													</div>
													<div class="form-group">
														<label for="userEmail">电子邮箱</label>
														<input type="email" class="form-control" id="userEmail" placeholder="请输入邮箱地址" v-model="logInfo.userEmail">
													</div>
													<label for="userRole">用户权限（注册时必选）</label>
													<br />
													<label><input type="radio" id="userRole" v-model="logInfo.permission" value="2" checked="checked">求职者</label>
													<label><input type="radio" v-model="logInfo.permission" value="1">企业</label>
													<br />
													<p style="margin-top: 20px;">
														<button type="button" class="btn btn-success" @click="regist()">注册</button>
													</p>
												</div>
											</div>
										</div>
									</div>
									<div class="panel panel-warning">
										<div class="panel-heading">
											<h4 class="panel-title">
												<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
													忘记密码？
												</a>
											</h4>
										</div>
										<div id="collapseTwo" class="panel-collapse collapse">
											<div class="panel-body">
												<div class="input-group">
													<input type="email" id="toSendCodeEmail" v-model="toSendCodeEmail" class="form-control" placeholder="请输入注册时提供的邮箱">
													<span class="input-group-btn">
														<button type="button" class="btn btn-warning" @click="sendEmailCode()">发送验证码</button>
													</span>
												</div>
												<div class="form-group">
													<label for="captchaCode">验证码</label>
													<input type="text" class="form-control" id="captchaCode" placeholder="请输入验证码" v-model="captchaCode">
												</div>
												<div class="form-group">
													<label for="logPassword2">新密码</label>
													<input type="password" class="form-control" id="logPassword2" placeholder="请输入新密码" v-model="logInfo.password">
												</div>
												<div class="form-group">
													<label for="logPasswordRe2">确认密码</label>
													<input type="password" class="form-control" id="logPasswordRe2" placeholder="请确认密码" v-model="logInfo.passwordRe">
												</div>
												<p style="margin-top: 20px;">
													<button type="button" class="btn btn-danger" @click="resetPasswordByCaptcha()">重置密码</button>
												</p>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-primary" @click="login()">登录</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>



	<script>
		let vm = new Vue({
			el: '#app',
			components: {
				'main_view': httpVueLoader('main.vue'),
				'enterprise_info': httpVueLoader('EnterpriseInfo.vue'),
				'enterprise_manage': httpVueLoader('EnterpriseManage.vue'),
				'users_manage': httpVueLoader('UsersManage.vue'),
				'job_add': httpVueLoader('JobAdd.vue'),
				'job_manage': httpVueLoader('JobManage.vue'),
				'resume_edit': httpVueLoader('ResumeEdit.vue'),
				'explore_job': httpVueLoader('ExploreJob.vue'),
				'post_resume_status':httpVueLoader('PostResumeStatus.vue'),
				'resume_manage':httpVueLoader('ResumeManage.vue'),
			},
			data: {
				main_view: 'main_view',
				username: '',
				isLogged: localStorage.getItem('x-auth-token'),
				toSendCodeEmail: '',
				captchaCode: '',
				logInfo: {
					username: '',
					password: '',
					passwordRe: '',
					userEmail: '',
					permission: 2
				},
				sysUser: {
					permission: 2,
					username: ''
				},
				captchaId: 0,
			},
			mounted() {
				//test
				// this.main_view = 'explore_job';
				let token = localStorage.getItem("x-auth-token");
				if (token !== null && token !== undefined && token.trim() !== "") {
					//logged
					this.isLogged === true;
					this.sysUser = JSON.parse(localStorage.getItem('sysUser'));
				} else {
					this.isLogged === false;
					$('#editModal').modal();
				}

			},
			methods: {
				//切换组件用
				handleChangeView: function(componentName) {
					this.main_view = componentName;
				},
				login() {
					$.ajax({
						url: conf.ur + "/doLogin",
						type: 'post',
						dataType: 'json',
						data: JSON.stringify({
							"username": this.logInfo.username,
							"password": this.logInfo.password
						}),
						headers: {
							"Content-Type": "application/json"
						},
						success: (data) => {
							console.log(JSON.stringify(data))
							let sysUser = data.sysUser;
							if (sysUser === null) {
								alert("用户名或密码错误！");
								return;
							} else {
								conf.storage.setItem('x-auth-token', sysUser.token);
								conf.storage.setItem('sysUser', JSON.stringify(sysUser));
								window.location.reload();
							}
						},
						error: (err) => {
							console.log("网络异常！")
							conf.storage.clear();
							window.location.reload();
						}
					});
				},
				regist() {
					console.log(JSON.stringify(this.logInfo))
					if (this.logInfo.username.trim() === "" || this.logInfo.username == undefined || this.logInfo.username == null) {
						alert("用户名不能为空！")
						return;
					}
					if (this.logInfo.password.trim() === "" || this.logInfo.password == undefined || this.logInfo.password == null) {
						alert("密码不能为空！")
						return;
					}
					if (this.logInfo.passwordRe.trim() === "" || this.logInfo.passwordRe == undefined || this.logInfo.passwordRe ==
						null) {
						alert("确认密码不能为空！")
						return;
					}
					if (this.logInfo.userEmail.trim() === "" || this.logInfo.userEmail == undefined || this.logInfo.userEmail ==
						null) {
						alert("邮箱地址不能为空！")
						return;
					}
					if (this.logInfo.passwordRe.trim() !== this.logInfo.password.trim()) {
						alert("请输入一致的密码！")
						return;
					}
					$.ajax({
						url: conf.ur + "/doRegister",
						type: 'post',
						dataType: 'json',
						data: JSON.stringify({
							"username": this.logInfo.username.trim(),
							"password": this.logInfo.password.trim(),
							"permission": parseInt(this.logInfo.permission),
							"email": this.logInfo.userEmail.trim()
						}),
						headers: {
							"Content-Type": "application/json"
						},
						success: (data) => {
							console.log(JSON.stringify(data))
							if (data.code !== -1) {
								alert("注册成功！")
								window.location.reload();
							} else {
								alert(data.msg)
							}
						},
						error: (err) => {
							alert("网络异常！")
							console.log("网络异常！")
							window.location.reload();
						}
					});
				},
				sendEmailCode() {
					if (this.toSendCodeEmail.trim() === "" || this.toSendCodeEmail == undefined || this.toSendCodeEmail == null) {
						alert("邮箱地址不能为空！")
						return;
					}
					$.ajax({
						url: conf.ur + "/toSendCodeEmail",
						type: 'post',
						dataType: "text",
						traditional: true,
						async: false,
						data: {
							"toSendCodeEmail": this.toSendCodeEmail
						},
						headers: {
							"Content-Type": "application/x-www-form-urlencoded"
						},
						success: (data) => {
							console.log(data)
							data = JSON.parse(data)
							if (data.code === 0) {
								alert("验证码已发送！");
								this.captchaId = parseInt(data.data);
							} else {
								alert(data.msg);
							}
						},
						error: (err) => {
							console.log("网络异常！")
						}
					});
				},
				resetPasswordByCaptcha() {
					console.log(JSON.stringify(this.logInfo))
					if (this.logInfo.password.trim() === "" || this.logInfo.password == undefined || this.logInfo.password == null) {
						alert("密码不能为空！")
						return;
					}
					if (this.logInfo.passwordRe.trim() === "" || this.logInfo.passwordRe == undefined || this.logInfo.passwordRe ==
						null) {
						alert("确认密码不能为空！")
						return;
					}
					if (this.captchaCode.trim() === "" || this.captchaCode == undefined || this.captchaCode ==
						null) {
						alert("验证码不能为空！")
						return;
					}
					if (this.logInfo.passwordRe.trim() !== this.logInfo.password.trim()) {
						alert("请输入一致的密码！")
						return;
					}
					console.log("验证码：" + JSON.stringify({
						"password": this.logInfo.password.trim(),
						"userId": parseInt(this.captchaId),
						"captcha": this.captchaCode.trim()
					}))
					$.ajax({
						url: conf.ur + "/resetPasswordByCaptcha",
						type: 'post',
						dataType: 'json',
						data: JSON.stringify({
							"password": this.logInfo.password.trim(),
							"userId": parseInt(this.captchaId),
							"captcha": this.captchaCode.trim()
						}),
						headers: {
							"Content-Type": "application/json"
						},
						success: (data) => {
							console.log(JSON.stringify(data))
							if (data.code !== -1) {
								alert("密码重置成功！")
								window.location.reload()
							} else {
								alert(data.msg)
							}
						},
						error: (err) => {
							alert("网络异常！")
							console.log("网络异常！")
							window.location.reload();
						}
					});
				},
				dologout() {
					console.log(conf.ur + "/logout")
					$.ajax({
						url: conf.ur + "/logout",
						type: 'get',
						headers: {
							"Content-Type": "application/json",
							"x-auth-token": window.localStorage.getItem('x-auth-token')
						},
						success: (data) => {
							localStorage.clear();
							window.location.reload();
						},
						error: (err) => {
							console.log(JSON.stringify(err))
							console.log("网络异常！")
							conf.storage.clear();
							window.location.reload();
						}
					});
				},
			}
		})
	</script>

	<style>
		html,
		body {
			height: 100%;
			margin: 0px;
			padding: 0px;
		}

		#app {
			background-color: #999;
			height: 100%;
		}

		.app-header {
			background-color: #85d989;
			width: 100%;
			height: 50px;
		}

		#main-container {
			background-color: ghostwhite;
			width: 100%;
			position: absolute;
			top: 50px;
			bottom: 0px;
			left: 0px;
		}

		.jumbotron {
			background-color: ghostwhite;
		}
	</style>
</html>
